import { onMounted, reactive } from 'vue' // vue相关方法
import Tiandimap from '@/Hooks/Tiandimap.js'
export const CreateMap = (map) => {
  const { TiandiMap_vec, TiandiMap_cva, TiandiMap_img, TiandiMap_cia } =
    Tiandimap()
  /* 加载矢量地图文档 */
  const docLayer = new Zondy.Map.Doc('', 'guanggu', {
    ip: 'localhost',
    port: 6163,
    crossOrigin: 'anonymous',
  })
  const initMap = (map) => {
    map.value = new ol.Map({
      target: 'map',
      layers: [TiandiMap_img, TiandiMap_cia, TiandiMap_vec, TiandiMap_cva],
      view: new ol.View({
        projection: 'EPSG:4326',
        center: [114.38, 30.48],
        zoom: 13,
      }),
    })
    map.value.addLayer(docLayer)
    /* 加载地图控件 */
    /* zoom滑块控件 */
    const zoomslider = new ol.control.ZoomSlider()
    map.value.addControl(zoomslider)
    /* 返回目标点控件 */
    const zoomToExtent = new ol.control.ZoomToExtent({
      extent: [114.3, 30.44, 114.49, 30.54],
    })
    map.value.addControl(zoomToExtent)
    /* 比例尺控件 */
    var scaleLineControl = new ol.control.ScaleLine({
      units: 'metric',
    })
    map.value.addControl(scaleLineControl)
    /* 鼠标位置控件 */
    var mousePositionControl = new ol.control.MousePosition({
      coordinateFormat: ol.coordinate.createStringXY(4),
      projection: 'EPSG:4326',
      className: 'custom-mouse-position',
      target: document.getElementById('mouse-position'),
      undefinedHTML: '&nbsp;',
    })
    map.value.addControl(mousePositionControl)
    /* 鹰眼控件 */
    var overviewMapControl = new ol.control.OverviewMap({
      className: 'ol-overviewmap ol-custom-overviewmap',
      layers: [TiandiMap_img, TiandiMap_cia, TiandiMap_vec, TiandiMap_cva],
      collapseLabel: '\u00BB',
      label: '\u00AB',
      collapsed: false,
      view: new ol.View({
        projection: 'EPSG:4326',
        minZoom: 8,
        maxZoom: 18,
      }),
    })
    map.value.addControl(overviewMapControl)
  }
  return { docLayer, initMap }
}
